<template>
	<view class="registrateBox">
		<view :style="{'height': `${statusBarHeight}px`, 'background-color': 'transparent'}"></view>
		<uni-nav-bar backgroundColor="transparent" color="#fff" :title="$t('language.Attendance')" @clickLeft="goBack"
			left-icon="left" :border="false" />
		<view class="registraBgColor">
			<view class="logo">
				<image class="logo-ic" src="@/static/logo.png" alt="" />
				<view class="lang-wrap" @click="changeLanguage">
					<image src="../../static/100.png" mode=""></image>
					<text>{{$t('locale.lang')}}</text>
				</view>
			</view>
			<view class="registrateForm">
				<view class="registrateTitle">
					<image :src="`${baseUrl}/static/img/xiaolian-c.png`" />
					{{$t('language.regist7')}}
				</view>
				<view class="lableBox">
					<view class="lablegroup" v-if="meetInfo.en_name != '' && meetInfo.ch_name != ''">
						<view class="lableTitle">{{$t('language.regist10') + ' /' + $t('language.regist9')}}</view>
						<view class="lableInput">
							<input type="text" :placeholder="meetInfo.en_name + ' ' + meetInfo.ch_name" disabled />
						</view>
					</view>
					<!-- <view class="lablegroup" v-if="meetInfo.ch_name != ''">
						<view class="lableTitle">{{$t('language.regist9')}}</view>
						<view class="lableInput">
							<input type="text" :placeholder="meetInfo.ch_name" disabled />
						</view>
					</view> -->
					<view class="lablegroup" v-if="meetInfo.depart != null">
						<view class="lableTitle">{{$t('index.text-6')}}</view>
						<view class="lableInput">
							<input type="text"
								:placeholder="$t('language.name') == '中文' ? departArray[departArrayIndex].cn_title : departArray[departArrayIndex].eu_title"
								disabled />
						</view>
					</view>
					<view class="lablegroup" v-if="meetInfo.job_id != null">
						<view class="lableTitle">{{$t('index.text-8')}}</view>
						<view class="lableInput">
							<input type="text"
								:placeholder="$t('language.name') == '中文' ? jobArray[jobArrayIndex].cn_title : jobArray[jobArrayIndex].eu_title"
								disabled />
						</view>
					</view>
					<view class="lablegroup" v-if="meetInfo.phone != ''">
						<view class="lableTitle">{{$t('language.regist11')}}</view>
						<view class="lableInput">
							<input type="text" :placeholder="meetInfo.phone" disabled />
						</view>
					</view>
					<view class="lablegroup" v-if="meetInfo.email != ''">
						<view class="lableTitle">{{$t('language.regist12')}}</view>
						<view class="lableInput">
							<input type="text" :placeholder="meetInfo.email" disabled />
						</view>
					</view>
					<view class="lablegroup">
						<view class="lableTitle">{{$t('index.text-73')}}</view>
						<view class="lableInput">
							<input type="text" :placeholder="meetInfo.dinner_table_num" disabled />
						</view>
					</view>
				</view>
				<view class="cue-next" v-if="daying == 1">{{$t('language.regist19')}}</view>
				<view class="ps" v-if="daying == 1" @click="toSaoyisao">{{$t('language.regist8')}}</view>
			</view>
		</view>

		<uni-popup ref="popup" class="popup-dy" type="center" :animation="false">
			<view class="popup-content">
				<image class="dy-ic" src="../../static/dy-ic.png" mode=""></image>
				<text>{{popupMsg}}</text>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import {
		sign_info,
		paiStart,
		sign,
		job,
		department,
		qy_sdk
	} from "@/api/user";

	import uniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue"
	
	// #ifdef H5
	var jWeixin = require('jweixin-module')
	// #endif

	export default {
		name: "sign",
		data() {
			return {
				baseUrl: HTTP_REQUEST_URL,
				statusBarHeight: 44,
				show: true,
				scanQRCode: "",
				daying: 2,
				meetInfo: '',
				popupMsg: '',
				departArray: [],
				departArrayIndex: 0,
				jobArray: [],
				jobArrayIndex: 0
			};
		},
		components: {
			uniPopup
		},
		onLoad(o) {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			let scanQRCode = o.scanQRCode;
			this.scanQRCode = scanQRCode;
			this.getDepartment()
			this.getJob()
			this.getConfig();
			this.getMeetingInfo();
		},
		methods: {
			getJob() {
				job({
					event_id: this.scanQRCode
				}).then(
					res => {
						this.jobArray = res.data
					},
					err => {
						console.log(err)
					}
				);
			},
			getDepartment() {
				department({
					event_id: this.scanQRCode
				}).then(
					res => {
						this.departArray = res.data
						console.log(res.data)
					},
					err => {
						console.log(err)
					}
				);
			},
			getConfig() {
				paiStart({
					event_id: this.scanQRCode
				}).then(
					response => {
						if (response.code == 200) {
							this.daying = response.data.daying
						} else {
							console.log(response);
						}
					},
					err => {
						console.log(err)
					}
				);
			},
			getMeetingInfo() {
				sign_info({
					event_id: this.scanQRCode
				}).then(
					response => {
						this.$nextTick(() => {
							this.meetInfo = response.data
							let {
								depart,
								job_id
							} = response.data
							let _departArray = this.departArray
							_departArray.forEach((item, i) => {
								if (item.id == depart) {
									this.departArrayIndex = i;
								}
							})

							this.jobArray.forEach((item, i) => {
								if (item.id == job_id) {
									this.jobArrayIndex = i;
								}
							})
						})
					},
					err => {
						console.log(err)
					}
				);
			},
			async toSaoyisao(bol) {
				// if(bol == 2) return
				const t = this

				// #ifdef H5
				const response = await qy_sdk({
					url: window.location.href.split('#')[0]
				})
				console.log(response, 'response')
				if (response.code == 200) {
					var json = response.data;
					jWeixin.config({
						beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: json.appId, // 必填，企业微信的corpID
						timestamp: json.timestamp, // 必填，生成签名的时间戳
						nonceStr: json.nonceStr, // 必填，生成签名的随机串
						signature: json.signature, // 必填，签名，见附录1
						jsApiList: json.jsApiList
						// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
					});
					jWeixin.ready(() => {
						jWeixin.scanQRCode({
							desc: 'scanQRCode desc',
							needResult: 1, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，
							scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是条形码（一维码），默认二者都有
							success: res => {
								// 回调
								t.scanQRCode = res.resultStr;
								sign({
									event_id: t.scanQRCode
								}).then(
									resdata => {
										t.popupMsg = resdata.msg
										console.log(t.$refs)
										console.log(t.$refs.popup)
										t.$refs.popup.open()
								
										let timer = setTimeout(() => {
											t.$refs.popup.close()
											clearTimeout(timer)
											timer = null
										}, 5000)
									},
									err => {
										console.log(err)
									}
								);
							},
							error: function(res) {
								if (res.errMsg.indexOf('function_not_exist') > 0) {
									alert('版本过低请升级');
								}
							}
						});
					});
					jWeixin.error(function(res) {
						//通过error接口处理失败验证
						// config信息验证失败会执行error
					});
				} else {
					alert(response.data.code);
				}
				return
				// #endif

				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode', 'barCode'],
					success(res) {
						console.log(res, res.result, 'res.result')
						t.scanQRCode = res.result;
						sign({
							event_id: t.scanQRCode
						}).then(
							resdata => {
								t.popupMsg = resdata.msg
								console.log(t.$refs)
								console.log(t.$refs.popup)
								t.$refs.popup.open()

								let timer = setTimeout(() => {
									t.$refs.popup.close()
									clearTimeout(timer)
									timer = null
								}, 5000)

								// if (resdata.code == 200) {
								// 	uni.showToast({
								// 		title: resdata.msg,
								// 		icon: 'none',
								// 		duration: 5000
								// 	})
								// } else {
								// 	uni.showToast({
								// 		title: resdata.msg,
								// 		icon: 'none'
								// 	})
								// }
							},
							err => {
								console.log(err)
							}
						);
					}
				})
			},
			goBack() {
				uni.navigateBack()
			},
			changeLanguage() {
				if (this.$i18n.locale == 'zh') {
					this.$i18n.locale = 'en';
					uni.setStorageSync('locale', 'en')
				} else {
					this.$i18n.locale = 'zh';
					uni.setStorageSync('locale', 'zh')
				}
			}
		}
	};
</script>
<style lang="scss">
	page {
		background: #050033;
	}

	.registrateBox {
		width: 100%;
		height: 100%;
		min-height: 100vh;
		background-image: url($image-base-url + '/static/img/sign-bg.png');
		background-size: 100% 100%;
	}

	// .registraBgColor {
	// 	width: 100%;
	// 	height: 100%;
	// 	background: #050033;
	// }

	.logo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20upx 30upx;

		.logo-ic {
			width: 78upx;
			height: 64upx;
		}

		.lang-wrap {
			display: flex;
			align-items: center;
			color: #fff;
			font-size: 24upx;

			image {
				width: 30upx;
				height: 30upx;
				margin-right: 12upx;
			}
		}
	}

	.registrateTitle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: #fff;
		align-items: center;
		padding: 140upx 0 60upx;
		font-size: 36upx;
	}

	.registrateTitle image {
		width: 120upx;
		height: 120upx;
		margin-bottom: 40upx;
	}

	.lableBox {
		padding: 0 30upx;
	}

	.lablegroup,
	.lablegroupTwo {
		padding-bottom: 16upx;
	}

	.lablegroupTwo .lablegroup {
		padding-bottom: 0;
	}

	.lableTitle {
		color: #fff;
		padding: 12upx 0;
	}

	.lableInput {
		position: relative;
	}

	.lableInput input {
		width: 100%;
		height: 70upx;
		background: none;
		padding-left: 16upx;
		border-radius: 8upx;
		color: #fff;
		border: 2upx solid #fff;
		box-sizing: border-box;
	}

	::-webkit-input-placeholder {
		/* WebKit browsers */
		color: #fff;
	}

	.registrateForm {
		height: 100%;
		min-height: calc(100vh - 140px);
		padding-bottom: 68upx;
		box-sizing: border-box;
	}

	.registrateForm .ps {
		color: #fff;
		width: 690upx;
		text-align: center;
		line-height: 80upx;
		border-radius: 80upx;
		margin: 0 auto;
		background: #b78d5b;
		color: #fff;
	}

	.registrateForm .cue-next {
		font-size: 28upx;
		margin-top: 80upx;
		margin-bottom: 12upx;
		text-align: center;
		color: #fff;
		font-size: 24upx;
	}

	.psButton {
		padding: 0 30upx;
		padding-top: 130upx;
		display: flex;
		justify-content: space-between;
	}

	.psButton>view {
		width: 330upx;
		height: 90upx;
		color: #fff;
		border-radius: 90upx;
		border: 2upx solid #fff;
		text-align: center;
		font-size: 32upx;
		line-height: 85upx;
	}

	.psButton>view.yellow {
		border: 2upx solid #d96932;
		background: #d96932;
	}

	.popup-dy {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.popup-content {
		width: 510upx;
		min-height: 356upx;
		font-size: 28upx;
		color: #0a0204;
		padding: 40upx;
		box-sizing: border-box;
		border-radius: 8upx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.dy-ic {
			width: 60upx;
			height: 60upx;
			margin-bottom: 40upx;
		}
	}
</style>